/* Site details */

.blueprints-panel {
	--padding-size: 24px;

	background: #ffffff;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
	border-radius: var(--site-manager-border-radius);
	overflow: hidden;
	flex-grow: 1;

	&:not(.is-mobile) {
		width: var(--site-manager-site-info-min-width);
	}

	/* Hide the Blueprint thumbnail. It doesn't seem possible with the component props. */
	:global(.dataviews__view-actions) {
		padding-top: 0;
		padding-left: var(--padding-size);
		padding-right: var(--padding-size);
	}
	:global(.dataviews__view-actions > :not(.dataviews__search)) {
		display: none;
	}

	:global(.dataviews-view-list__primary-field),
	:global(.dataviews-view-list__media-wrapper) {
		display: none;
	}
	:global(.dataviews-view-list__fields) {
		flex-direction: column;
		gap: 12px;
	}
	:global(.dataviews-view-list__field-wrapper) {
		width: 100%;
	}
}

.padded {
	padding: var(--padding-size);
}

.padded-h {
	padding: 0 var(--padding-size);
}

.section-title {
	/* Provide enough space for most autogenerated site names to avoid
	   flickering site manager panel width when switching between
	   sites having names of different lengths */
	width: 20ch;
	height: 24px;
	margin: 0;

	/* Inside auto layout */
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;

	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	/* identical to box height, or 150% */
	letter-spacing: -0.01em;

	/* Gutenberg/Gray 900 */
	color: var(--color-gray-900);
}

.blueprint-title {
	display: block;
	width: 100%;
	margin: 0;
}
